<template>
  <div class="student">
    <h1>This is an student page</h1>
    <div>
      <p>学生姓名:<input v-model="student.username"></p>
      <p>学生学号:<input v-model="student.userid"></p>
      <p>学生年龄:<input v-model="student.age"></p>
      <p>学生性别:<input type="radio" id="male" value="male" v-model="student.sex">男
      <input type="radio" id="female" value="female" v-model="student.sex">女</p>
      <p>学生年级: <select v-model="student.grade" name="grade">
      <option value="1">大一</option>
      <option value="2">大二</option>
      <option value="3">大三</option>
      <option value="4">大四</option>
      </select></p>
      <p>学生邮箱:<input v-model="student.email"></p>
      <p><button  v-on:click="save">保存</button></p>
    </div>
  </div>
</template>
<script>
export default {
  name: "StudentView",
  data() {
    return {
      student:{
        username:"tom",
        userid:"01",
        age:"11",
        sex:"male",
        grade:"1",
        email:"aaa@qq.com"
      }
    };
  },
  methods: {
    save() {
      if(this.student.age>100 || this.student.age<1)
      {
        alert("年龄输入错误")
      }
    }
  }
};
</script>
<style scoped>
</style>